import React, { useState } from 'react';
import data from './citydata'
import { Cell, CellGroup } from 'react-vant';
import { Popup } from 'react-vant';
import { useNavigate } from 'react-router-dom';
console.log(data);

const Index = () => {
  const [visible, setVisible] = useState(false);
  const [index, setIndex] = useState(0);
  const list = data[index].city
  const navigate = useNavigate()
  return (
    <div>
      <CellGroup>
        {
          data.map((v, i) => {
            return <Cell title={v.name} key={i} isLink onClick={() => {
              setVisible(true);
              setIndex(i)
            }}></Cell>
          })
        }
      </CellGroup>

      <Popup
        visible={visible}
        onClose={() => setVisible(false)}
        position="right"
      >
        <div style={{ width: '80vw', height: '100vh', padding: 2 }}>
          {
            list.map((v, i) => {
              return <Cell title={v.name} key={i} isLink onClick={() => {
                localStorage.setItem('city', v.name);
                navigate(-1)
              }}></Cell>
            })
          }
        </div>
      </Popup>
    </div>
  )
}

export default Index